<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.grid {
				margin: auto;
				width: 500px;
				text-align: center;
			}

			.grid table {
				width: 100%;
				border-collapse: collapse;
			}

			.grid th,
			td {
				padding: 10;
				border: 1px dashed orange;
				height: 35px;
				line-height: 35px;
			}

			.grid th {
				background-color: #F3DCAB;
			}

			.grid .book {
				padding-bottom: 10px;
				padding-top: 5px;
				background-color: #F3DCAB;
			}
			.grid .total{
				height: 30px;
				line-height: 30px;
				background-color: #F3DCAB;
				border-top: 1px solid #C2D89A;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="grid">
				<div>
					<h1>图书管理</h1>
					<div class="book">
						<div>
							<label for="id">编号</label>
							<input type="text" id='id' v-model="id" disabled="false" v-focus>
							<label for="name"></label>
							<input type="text" id='name' v-model="name">
							<button @click="handle" :disabled="submitFlag">提交</button>
						</div>
					</div>
					<div class="total">
						<span>图书总数</span>
						<span>{{total}}</span>
					</div>
				</div>
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for='item in books'>
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date|formatDateTime('yyyy-MM-dd hh:mm:ss')}}</td>
							<td>
								<a href="" @click.prevent='toEdit(item.id)'>修改</a>
								<span>|</span>
								<a href="" @click.prevent='toDel(item.id)'>删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		    axios.defaults.baseURL='http://localhost:3000/';
			axios.interceptors.response.use(function(res){
				return res.data;
			},function(error){
				console.log(error);
			});
			Vue.directive('focus', {
				inserted: function(el) {
					el.focus();
				}
			});			
			
			Vue.filter("formatDateTime", function formatDateTime(value) {
				var date = new Date(value);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				if (month < 10) {
					month = "0" + month;
				}
				if (day < 10) {
					day = "0" + day;
				}
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes;
			});



			var vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name: '',
					flag: false,
					submitFlag:false,
					books: []
				},
				methods: {
					handle:async function() {
						if (this.flag) {
							//编辑	
							var ret =await axios.put('books/' + this.id,{
								name:this.name
							});
							if(ret.status==200){
								this.queryData();
							}
							this.flag = false;							
						} else {
							//添加
							 var res= await axios.post('books',{
								name:this.name
							})
							if(res.status==200){
								this.queryData();
							}
						}
						this.id = '';
						this.name = '';
					},
					toEdit:async function(id) {	
						//Flag状态区分修改和新建
						this.flag = true;
						var ret =await axios.get('books/' + id)
						this.id = ret.id;
						this.name = ret.name;
					},
					toDel:async function(id) {
						/* 	var index = this.books.findIndex(function(item){
									return item.id == id;
								});
								this.books.splice(index,1); */
						// this.books = this.books.filter(function(item) {
						// 	return item.id != id;
						// });
						var ret = await axios.delete('books/' + id);
						if(ret.status ==200){
							this.queryData();
						}
						
					},
					queryData:async function(){
						// var ret = await.get('books');
						// this.books = ret.data;
						this.books =await axios.get('books');
					}
				},
				computed:{
					total:function(){
						return this.books.length;
					}
				},
				watch:{
					name:async function(val){
						// var flag =this.books.some(function(item){
						//   return item.name == val
						// });
						var ret = await axios.get('books/book/'+this.name);
						if(ret.status == 1 ){
							this.submitFlag=true;							
						}
						else{
							this.submitFlag=false;
						}
					}
				},
				mounted:function(){					
					this.queryData();
					
					
				}
			});
		</script>
	</body>
</html>
